<template>
  <view class="cell-box ss-flex ss-row-between ss-col-center" @tap="$emit('tap')">
    <view class="cell-mmm">
      <view class="cell-title">预约时间</view>
      <view class="cell-desc ss-line-1" v-if="modelValue">
        {{ modelValue }}
      </view>
      <view class="cell-desc ss-line-1" v-else>
        请选择预约时间
      </view>
    </view>
    <text class="cicon-forward"></text>
  </view>
</template>

<script setup>
  defineProps({
    modelValue: {
      type: String,
      default: '',
    },
    sku: {
      type: Object,
      default: () => ({}),
    },
  });

  defineEmits(['tap']);
</script>

<style lang="scss" scoped>
  .cell-box {
    height: 120rpx;
    padding: 0 30rpx;
    background: #fff;
    position: relative;

    .cell-mmm {
      flex: 1;
    }

    .cell-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 10rpx;
    }

    .cell-desc {
      font-size: 26rpx;
      color: #999;
    }

    .cicon-forward {
      color: #c4c4c4;
      font-size: 32rpx;
    }

    &::after {
      position: absolute;
      content: '';
      border-bottom: 2rpx solid #f2f2f2;
      transform: scaleY(0.5);
      bottom: 0;
      right: 0;
      left: 30rpx;
    }
  }
</style>
